<template>
	<div class="orderList">
		<view class="custum-head"></view>
		<view class="head">
			<!-- #ifdef MP-WEIXIN -->
			<view class="left" @tap="onBack">
				<u-icon name="arrow-left" color="#fff" size="40"></u-icon>
			</view>
			<view class="title">订单列表</view>
			<!-- #endif -->

		</view>

		<view class="tabs">
			<view class="tab" :class="tabIdx === index ? 'active' : ''" @click="onTabChange(index)"
				v-for="(item, index) in tabs" :key="index">
				{{ item.name }}

				<view class="lineBac line" v-if="tabIdx === index"></view>
				<view class="lineNobac line" v-if="tabIdx != index"></view>
			</view>
		</view>

		<view class="outer">
			<view class="operate">
				<view class="leftOpera">
					<view class="img">
						<image class="icon_img" :src="url + '/images/order/search.png'" mode="heightFix" />
					</view>
					<u-input placeholder="请输入关键词查询" v-model="keyword" @blur="getData"
						placeholderStyle="color:#868A98"></u-input>
				</view>
				<!-- <text class="text">搜索</text> -->
			</view>
		</view>

		<view class="list">
			<view class="item" v-for="(item, i) in tab[tabIdx].list" :key="i">
				<view class="itemHead">
					<view class="orderNum">
						<image class="icon_img" :src="url + '/images/entryOrder/fly.png'" mode="heightFix" />
						<text>{{ item.OrderNo }}</text>
					</view>
					<view class="orderStatus" :style="{ background: getStatusColorAndTitle(item).bacground }">
						<text :style="{ color: getStatusColorAndTitle(item).color }">{{
							getStatusColorAndTitle(item).title }}</text>
					</view>
				</view>
				<view class="itemBody">
					<view class="itemBodyTitle">
						<view class="img">
							<image class="icon_img flag" style="border-radius: 50%;" :src="item.NationalFlag" />
						</view>
						<view class="txt"> {{ item.VisaTitleSM }}【{{ item.AreaName }}】</view>
					</view>
					
					<view class="row middle" v-if="item.DeliverCompany && item.OrderStatus == '508'">
						<text >快递号码：{{ item.DeliverCompany }}{{
							item.DeilverCode }} <text class="copy-btn"
								@click.stop="copyDeilverCode" :data-code="item.DeilverCode">复制</text>
								 <text class="copy-btn" :data-id="item.Id" @click="getTrackingExpress">查询</text>
						</text>
					
					
					</view>
					<view class="personInfo">
						<view class="itemPerson" v-for="(p, pIdx) in item.PassengerItem" :key="pIdx">
							<view>
								<view class="transactors">
									<text>办理人</text>
									<text>{{ p.PassengerName || '待上传' }}</text>
								</view>
							</view>
							<view v-if="item.PaymentStatus != 1" class="rightInfo" :data-name="p.url" :dataName="p.url"
								:data-url="p.url" @click="shareUrl">
								<view class="img">
									<image class="icon_img" :src="url + '/images/entryOrder/share.png'"
										mode="heightFix" />
								</view>
								<view class="txt">转发申请人填写</view>

							</view>
							<view v-else class="rightInfo" @click.stop="tapUpload" :data-name="item.PassengerName"
								:data-visa-title-s-m="item.VisaTitleSM" :data-id="item.Id"
								:data-payment-status="item.PaymentStatus" :data-visa-page="p.visaPage"
								:data-status="item.Status" :data-item="p">
								<view class="txt">下载签证</view>
							</view>
						</view>
					</view>
				</view>
				<view class="itemFooter">
					<view class="price">
						<text v-if="item.PaymentStatus == 1" class="text1">已支付</text>
						<text class="text2">合计</text>
						<text class="text3">¥ {{ item.TotolMoney }}</text>
					</view>
					
					<view class="btn" v-if="isMoreThan30SecondsAgo(item.SubmitTime)">
						<view class="circle" v-if="item.Status != -1 && (item.PaymentStatus == 0 && item.Status == 0)"
							@click.stop="cancelOrder" :data-idx="i">取消订单</view>
						<view class="pay"
							v-if="(item.Status != -1 && item.PaymentStatus != 1) || (item.PaymentStatus != 1 && item.IsSubmit == 1)"
							:data-idx="i" @click.stop="continueOrder(item.Id)">立即支付</view>
					</view>
					<view class="pay" v-if="!isMoreThan30SecondsAgo(item.SubmitTime)">
						<view class="circle" @click.stop="refresh" :data-idx="i">刷新</view>
					</view>

					<view class="btn" v-if="item.PaymentStatus == 1 && item.InvoiceNo == null && item.OrderStatus == 506 && !isThirtyDaysAgo(item.CreateTime)">
					<view class="invoice"
						
						 :data-idx="i" @click.stop="goInvoice">
						开发票
					</view>
					</view>
					
					<view class="btn" v-if="item.PaymentStatus == 1 && item.InvoiceNo ">
					<view class="nopay"  :data-idx="i"
						@click.stop="continueInvoice">
						查看发票
					</view>
					</view>
				</view>
			</view>
		</view>

		<view class="mask" v-if="dialogVisible">
			<view class="conent">
				<Dialog :url="pageUrl" :show="dialogVisible" @close="close"></Dialog>
			</view>
		</view>
		<!-- 物流信息弹框 -->
		<u-modal v-model="trackingModalShow" title="物流信息" :show-cancel-button="false" confirm-text="关闭">
		  <view class="tracking-modal" v-if="trackingInfo">
		    <view class="tracking-header">
		      <text class="express-name">{{ trackingInfo.expressName }}</text>
		      <text class="tracking-number">运单号：{{ trackingInfo.trackingNumber }}</text>
		      <text class="transit-time">运输时长：{{ trackingInfo.transitTime }}</text>
		      <text class="latest-time">更新时间：{{ trackingInfo.latestUpdateTime }}</text>
		      <text class="latest-status">当前状态：{{ trackingInfo.latestShipmentStatus }}</text>
		    </view>
		    <scroll-view scroll-y class="tracking-timeline">
		      <view class="timeline-container">
		        <view v-for="(item, index) in trackingInfo.trackingDetails" :key="index" class="timeline-item" :class="{'timeline-first': index === 0}">
		          <view class="timeline-dot" :class="{'timeline-dot-active': index === 0}"></view>
		          <view class="timeline-line" v-if="index < trackingInfo.trackingDetails.length - 1"></view>
		          <view class="timeline-content">
		            <view class="timeline-time">{{ item.time }}</view>
		            <view class="timeline-desc">{{ item.description }}</view>
		            <view class="timeline-location" v-if="item.location">{{ item.location }}</view>
		            <view class="timeline-status" v-if="item.shipmentStatus">{{ item.shipmentStatus }}</view>
		          </view>
		        </view>
		      </view>
		    </scroll-view>
		  </view>
		</u-modal>

		<wanl-pay-popup ref="popup" />
		<service></service>
		<!-- 授权组件 -->
		<authorize @onLoadFun="onLoadFun" ref="auth" :isAuto="true" :iShidden="iShidden" :isGoIndex="true" />
		<!-- <view class="compla">
      <image
        class="icon_img"
        :src="url + '/images/order/complaint.png'"
        mode="heightFix"
      />
    </view> -->
	</div>
</template>

<script>
	import wanlPayPopup from "./wanlPayPopup.vue";
	import index from "./index.js"
	import dialog from "@/component/dialog/dialog.vue"
	import service from '../../component/service/service.vue';
	

	export default {
		...index,
		components: {
			wanlPayPopup,
			dialog,
			service
		},
	};
</script>


<style lang="scss">
	.uni-input-input {
		z-index: 0 !important;
	}

	.uni-input-input::placeholder {
		color: #ff6600;
	}
</style>
<style lang="scss" scoped>
	$imgUrl: "https://file.aavisa.com/001";

	uni-page-body {
		height: 100%;
		background: #f5f6f8;
	}

	.custum-head {
		height: 80rpx;
	}

	.orderList {
		width: 100%;
		height: 100%;
		// background: url($imgUrl + "/images/entryOrder/orderBac.png") no-repeat center;
		background: url($imgUrl + "/bgbg.png") no-repeat top center;
		//url($imgUrl + "/images/entryOrder/orderBac.png") no-repeat center;
		background-size: 100%;
		font-family: PingFang SC;
		position: relative;
		overflow-y: hidden;

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx;
			z-index: 999;

			.conent {
				width: 100%;
				padding-bottom: 48rpx;
				background: #fff;
				border-radius: 36rpx;
				z-index: 9999;
				position: relative;

				.closeDia {
					position: absolute;
					bottom: -154rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 100;

					.icon_img1 {
						width: 72rpx;
						height: 72rpx;
					}
				}
			}
		}

		.compla {
			width: 91.5rpx;
			height: 91.5rpx;
			background: #01d39e;
			box-shadow: 0rpx 21rpx 24rpx 0rpx rgba(177, 184, 190, 0.35);
			border-radius: 50%;
			position: fixed;
			right: 24rpx;
			bottom: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;

			.icon_img {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.head {
			display: flex;
			align-items: center;
			height: 90rpx;
			padding: 0 31rpx 0 33rpx;

			.left {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 2rpx;
			}

			.title {
				width: 100%;
				font-weight: bold;
				font-size: 32rpx;
				color: #fff;
			}
		}

		.tabs {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 70rpx;
			margin: 20rpx 0 20rpx 0;
			color: #fff;

			.tab {
				font-size: 30rpx;
				border-bottom: 5rpx solid transparent;
				display: flex;
				align-items: center;
				flex-direction: column;
			}

			.active {
				font-weight: bold;
				font-size: 34rpx;
			}

			.line {
				width: 40rpx;
				height: 10rpx;
				border-radius: 20rpx;
				margin-top: 6rpx;
			}

			.lineBac {
				background: #fff;
				// box-shadow: -1rpx 4rpx 7rpx 0rpx rgba(1, 211, 158, 0.2);
				transition: all 0.5s ease;
			}

			.lineNobac {
				background: transparent;
				font-weight: 500;
				font-size: 30rpx;
			}
		}

		.outer {
			display: flex;
			justify-content: center;
			padding: 0 32rpx;
			margin-bottom: 30rpx;

			.operate {
				background: #ffffff;
				box-shadow: 0rpx 20rpx 32rpx 0rpx rgba(106, 174, 64, 0.05);
				border-radius: 35rpx;
				padding: 0 32rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 69rpx;

				.img {
					display: flex;
					align-items: center;

					.flag {
						display: block;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}
				}

				.icon_img {
					margin-right: 20rpx;
					width: 30rpx;
					height: 30rpx;
				}

				.input {
					height: 27rpx;
					width: 300rpx;
					font-size: 28rpx;
					color: #222;
				}

				.leftOpera {
					display: flex;
					align-items: center;

				}

				.text {
					font-size: 30rpx;
					color: #01d39e;
				}
			}
		}

		::v-deep .u-input__input {
			/* 样式规则 */
			min-height: 56rpx !important;
		}

		.list {
			height: calc(100% - 310rpx);
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 32rpx;

			.item:last-of-type {
				margin-bottom: 180rpx;
			}

			.item {
				width: 100%;
				background: #ffffff;
				box-shadow: 0rpx 1rpx 16rpx 0rpx rgba(143, 172, 162, 0.15);
				border-radius: 30rpx;
				padding: 20rpx 31rpx 4rpx 33rpx;
				margin-bottom: 30rpx;

				.itemHead {
					display: flex;
					justify-content: space-between;
					height: 60rpx;
					// border-bottom: 1px solid #eeeeee;
					font-size: 28rpx;
					line-height: 44rpx;

					.orderNum {
						display: flex;
						align-items: center;

						.icon_img {
							width: 34rpx;
							height: 28rpx;
							margin-right: 9rpx;
						}

						text {
							font-weight: 500;
							font-size: 24rpx;
							color: #8c94a1;
						}
					}

					.orderStatus {
						width: 103rpx;
						margin-top: 8rpx;
						height: 43rpx;
						background: rgba(253, 109, 4, 0.1);
						border-radius: 5rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						text {
							// font-weight: 500;
							color: #fd6d04;
							font-size: 24rpx;
						}
					}
				}

				.itemBodyTitle {
					display: flex;
					margin-bottom: 28rpx;
					padding-left: 34rpx;

					.icon_img {
						width: 48rpx;
						height: 48rpx;
						margin-right: 14rpx;
					}

					.txt {
						height: 31rpx;
						font-weight: bold;
						font-size: 32rpx;
						color: #101d34;
						line-height: 44rpx;
					}
				}

				.personInfo {
					// background: #f5f7f8;
					border-radius: 20rpx;
					padding: 0rpx 0rpx 12rpx 0;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;

					.itemPerson {
						display: flex;
						justify-content: space-between;

						// border-bottom: 1px dashed #8C94A1;
						.transactors {
							// font-weight: 500;
							font-size: 26rpx;

							text:first-child {
								color: #8c94a1;
								margin-right: 12rpx;
							}

							text:last-child {
								color: #000;
							}
						}

						.icon_img {
							width: 30rpx;
							height: 30rpx;
							// margin-left: 10rpx;
						}

						.rightInfo,
						.img {
							display: flex;
							align-items: center;
						}

						.rightInfo {
							.txt {
								font-weight: bold;
								font-size: 26rpx;
								color: #1c71f4;
								margin-left: 11rpx;
							}
						}
					}

					.itemPerson:nth-child(2) {
						margin: 24rpx 0 23rpx 0;
					}
				}

				.itemBody {
					padding: 33rpx 0 12rpx 0;
				}

				.itemFooter {
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;
					color: #222222;
					align-items: center;
					border-top: 1px dashed rgba(140, 148, 161, 0.2);
					height: 88rpx;

					.btn {
						display: flex;

						view {
							width: 159rpx;
							height: 52rpx;
							font-size: 26rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.circle {
							font-weight: 500;
							color: #8c94a1;
						}

						.pay {
							background: #1c71f4;
							border-radius: 26rpx;
							font-weight: bold;
							color: #ffffff;
						}

						.invoice {
							background-color: #dd524d;
							border-radius: 26rpx;
							font-weight: bold;
							color: #ffffff;
						}

						.refund {
							background-color: #ccc;
							border-radius: 26rpx;
							font-weight: bold;
							color: #ffffff;
						}
					}

					.price {
						.text1 {
							font-weight: 500;
							font-size: 26rpx;
							color: #49596d;
							margin-right: 10rpx;
						}

						.text2 {
							font-weight: 500;
							font-size: 26rpx;
							color: #49596d;
							margin-right: 10rpx;
						}

						.text3 {
							font-family: San Francisco Display;
							font-weight: bold;
							font-size: 32rpx;
							color: #da3939;
						}
					}
				}
			}
		}
	}

/* 物流信息弹框样式 */
.tracking-modal {
  padding: 20rpx;
  max-height: 70vh;
}

.tracking-header {
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.tracking-header text {
  display: block;
  margin-bottom: 8rpx;
  font-size: 26rpx;
  color: #333;
}

.tracking-header .express-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 12rpx;
}

.tracking-header .tracking-number {
  font-weight: 500;
}

.tracking-header .latest-status {
  color: #52c41a;
  font-weight: 500;
}

/* 时间线样式 */
.tracking-timeline {
  max-height: 500rpx;
  background: #fff;
}

.timeline-container {
  padding: 20rpx 0;
  position: relative;
}

.timeline-item {
  position: relative;
  padding-left: 60rpx;
  margin-bottom: 40rpx;
  min-height: 80rpx;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 20rpx;
  top: 8rpx;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #d9d9d9;
  border: 4rpx solid #fff;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
  z-index: 2;
}

.timeline-dot-active {
  background: #1890ff;
  width: 20rpx;
  height: 20rpx;
  left: 18rpx;
  top: 6rpx;
  box-shadow: 0 2rpx 8rpx rgba(24,144,255,0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.timeline-line {
  position: absolute;
  left: 27rpx;
  top: 28rpx;
  width: 2rpx;
  height: calc(100% + 12rpx);
  background: #e8e8e8;
  z-index: 1;
}

.timeline-item:last-child .timeline-line {
  display: none;
}

.timeline-content {
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 12rpx;
  border-left: 4rpx solid #e8e8e8;
  transition: all 0.3s ease;
}

.timeline-first .timeline-content {
  background: #e6f7ff;
  border-left-color: #1890ff;
  box-shadow: 0 2rpx 12rpx rgba(24,144,255,0.1);
}

.timeline-time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.timeline-first .timeline-time {
  color: #1890ff;
  font-weight: bold;
}

.timeline-desc {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  line-height: 1.4;
  font-weight: 500;
}

.timeline-first .timeline-desc {
  color: #1890ff;
  font-weight: bold;
}

.timeline-location {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 4rpx;
  line-height: 1.3;
}

.timeline-status {
  font-size: 24rpx;
  color: #52c41a;
  font-weight: 500;
  background: #f6ffed;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  display: inline-block;
  margin-top: 8rpx;
}

.row { width: 100%; padding: 30rpx 20rpx; background-color: #fff; display: flex; align-items: center; justify-content: space-between; }

.row.middle { background-color: #fcfcfc; }

.row.middle image { display: block; width: 50rpx; height: 50rpx; border-radius: 50%; }

.row.middle .text1 {     
	margin-left:  8rpx;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    /* width: 60rpx; */
    display: block;
    overflow: hidden;
    font-size: 32rpx;
    word-wrap: break-word;
    word-break: break-all;
	
    /* overflow: hidden; */
    font-weight: bold;}
.row.middle .text2  {     
	margin-left: 4rpx;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    width: 150rpx;
    display: block;
    overflow: hidden;
    font-size: 32rpx;
    word-wrap: break-word;
    word-break: break-all;
    /* overflow: hidden; */
    font-weight: bold;}
.copy-btn {
  color: #1890ff;
  margin-left: 8rpx;
  font-size: 24rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  border: 1rpx solid #91d5ff;
}
</style>